<template>
    <div class="top-box">
        <div class="back-box"  @click="$router.back()">
            <span class="iconfont icon-back-m"></span>
        </div>
        <div class="search-box" :class="isFocus?'':'active'">
            <span v-if="isFocus" class="search-btn iconfont icon-sousuo"></span>
            <input class="search-ipt" :style="isFocus?'':'text-indent:1.2em;'" v-model="search" @focus="initPage" type="text" placeholder="请输入您要查找的内容"/>
        </div>
        <div class="slidemenu-btn" v-if="isFocus">
            <span class="iconfont icon-query1" @click="toggleDrawer"></span>
        </div>
        <div class="slidemenu-btn" v-if="!isFocus">
            <span class="text" @click="iptShearch">搜索</span>
        </div>
        <div class="history-panel" v-if="!isFocus">
            <h4 v-if="historyxs">搜索历史</h4>
            <ul class="his_ulcon" v-if="historyxs">  
                <li v-for="(item,index) in searches_list" :key="index" @click="historysearch(item)">{{item}}</li>
            </ul> 
            <p v-if="historyxs" @click="clearhis()">清空历史记录</p>   
        </div>
    </div>
</template>

<script>
import {saveSearch} from './index.js'  //引用本地存储js  
import storage from 'good-storage'  //引入good-storage包  
export default {
    data(){
        return{
            search:'',
            isFocus:true,
            searches_list:[], //历史搜索记录列表
            historyxs:false
        }
    },
    methods:{
        //输入框获取焦点
        initPage(){
            this.isFocus = false;
            this.$emit('initSearchPage');
            //为避免重复先清空再添加  
            this.searches_list = [];
            let searches=storage.get('_search_');  
            this.searches_list = searches?searches:[];
            if (this.searches_list.length > 0 ) {
                
                this.historyxs=true;  
            }else{
                this.historyxs=false;  
                
            }
            
        },
        //点击搜索
        iptShearch(){
            this.isFocus = true;

            if(this.search!=''){ //搜索框不为空  
                
                saveSearch(this.search); // 本地存储搜索的内容 

                let params = {
                    majorInfo : this.search //零件号或零件名（中英文）或零件类型名称或责任人名称
                }
                this.$emit('handleSearch' , params)

                this.isFocus = true;  
                this.search='';  
            }    

            
        },
        //高级搜索按钮
        toggleDrawer() {
            this.$emit('initSearchPage')
            this.$emit('listenSlide')
        },
        //清空历史记录 
        clearhis(){   
            storage.remove('_search_');  
            this.searches_list = [];
            this.historyxs=false;  
            
        },
        //点击历史搜索把搜索的记录添加到good-storage中 
        historysearch(item){           
            saveSearch(item);  
            this.search = item; 
            this.iptShearch();
            this.historyxs = false;  
        } 
    }
}
</script>


<style lang="scss" scoped>

    .top-box{
        height: $topheight;
        position: fixed;
        top: 0;
        left: 0;
        width: 750px;
        z-index: 778;
        background: $gantanColor;
        .back-box{
        display: block;
        height: 100px;
        padding: 0 30px;
        line-height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        >span{
            font-size:40px;        
            color:$fontcolor;
        }
        }
        .search-box{
            position: absolute;
            width:70%;
            top: 50%;
            left: 50%;
            z-index: 888;
            transform: translate(-50% , -50%);
            &.active{
                width:74%;
                left: 13%;
                transform: translate(0 , -50%);
            }
            height: 64px;
            font-size: 0;
            border:1px solid #fff;
            background-color: #fff;
            border-radius: 35px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            >input{
                display: inline-block;
                width: 90%;
                height: 100%;
                line-height: 64px;
                padding: 0;
                outline: none;
                border:0 none;
                font-size: 24px;
                color:#363636;
                background-color: transparent;
            }
            >span{
                margin: 0 10px 0 18px;
                display: inline-block;
                height: 100%;
                line-height: 64px;
                font-size: 36px;
                color:$titlecolor;
            }
        }
        .slidemenu-btn{
            position: absolute;
            right: 30px;
            top:50%;
            transform: translateY(-50%);
            z-index: 555;
            >span{
                color: $fontcolor;
                font-size: 45px;
                &.text{
                    font-size: 24px;
                }
            }
        }
        .history-panel{
            position: absolute;
            top: 100px;
            left: 0;
            background-color: #fff;
            min-height: 1500px;
            width: 750px;
            overflow: hidden;
            .his_ulcon{
                margin-top: 40px;
                box-sizing: border-box;
                padding: 0 30px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: wrap;
                >li{
                    padding: 15px 30px;
                    border: 1px solid #999;
                    border-radius: 34px;
                    margin-right: 20px;
                    margin-bottom: 30px;
                    font-size: 28px;
                    color: #363636;
                }
            }
            h4{
                box-sizing: border-box;
                padding: 30px;
                line-height: 80px;
                height: 80px;
                font-size: 30px;
            } 
            >p{
                margin: 30px 0;
                text-align: center;
                line-height: 80px;
                height: 80px;
                font-size: 30px;
            }
        }
    }
   
</style>
